<template>
    <div class="foot">
        <div class="footBox">
            <router-link class="tabLeft" tag="div" :to="{name:'Home'}">
                <!-- <div class="tabLeft"> -->
                    <img src="@/assets/images/home.png" alt="home">
                    <span>首页</span>
                <!-- </div> -->
            </router-link>
            <span class="centerLine"></span>
            <router-link class="tabRight" tag="div" :to="{name:'Mine'}">
                <!-- <div class="tabRight"> -->
                    <img src="@/assets/images/mine.png" alt="home">
                    <span>我的</span>
                <!-- </div> -->
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Tabbar',
  data () {
      return {
          
      }
  }
}
</script>

<style lang="stylus" scoped>
.foot
    width 100%
    position fixed
    bottom 0
    left 0
    background #ffffff
    padding-bottom constant(safe-area-inset-bottom)
    padding-bottom env(safe-area-inset-bottom)
    z-index 9999
    .footBox
        width 100%
        height 98px
        display flex
        align-items center
        box-sizing border-box
        border-top 1px solid #efefef
        .centerLine
            display block
            width 2px
            height 20px
            background #ce0021
        .tabLeft,.tabRight
            display flex
            flex-direction column
            align-items center
            justify-content center
            flex 2
        img
            width 32px
            height 36px
            margin-bottom 10px
        span
            font-size 20px
            color #ce0021
</style>
